<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-25 16:14:59
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-31 15:27:44
 * @FilePath: \cxl-admin\src\pages\operation\notice\preview\Index.vue
-->
<template>
    <CustomDialogVue :data="dialog" @close="onCloseDialog">
        <template #content>
            <section class="notice-box">
                <section class="title">{{ dialog.notice?.title }}</section>
                <section v-html="dialog.notice?.content"></section>
            </section>
        </template>
    </CustomDialogVue>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'
import CustomDialogVue from '@/components/baseDialog/Index.vue'
import { noticeDetailedById } from '@/apis/operation/notice'

/**
 * 接受父组件传递的参数
 */
const prop = defineProps(['data'])

/**
 * 注册父组件回调方法
 */
const emits = defineEmits(['visible'])

const noticeType = ['其他消息', '系统消息', '业务消息', '调价信息']

/**
 * 弹窗数据
 */
const dialog = reactive({
    visible: false,
    title: '定义弹窗变量',
    width: '768px',
    notice: {
        title: '',
        type: '',
        content: ''
    }
})

/**
 * 监听传递参数变化
 */

watch([prop.data], (newValue, oldValue) => {
    dialog.visible = newValue[0].visible
    // dialog.title = newValue[0].title
    if (newValue[0].visible) {
        noticeDetailedById(newValue[0].noticeId).then(res => {
            if (res.data.value === 200) {
                dialog.notice.title = res.data.data.title
                dialog.notice.type = res.data.data.type
                dialog.notice.content = res.data.data.content
                dialog.title = noticeType[res.data.data.type]
            }
        })
    }
})

/**
 * 监听关闭弹窗
 */
const onCloseDialog = () => {
    emits('visible')
}
</script>
<style scoped lang="scss">
.notice-box {
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        text-align: center;
    }
}
</style>
